<template>
	<view class="">
		<view class="fixed-button">
			<uni-icons class="glow-button" type="plus" size="50" color='#3c9cff' @click="show = true"></uni-icons>
		</view>
		<view class="cardBg" v-if="gatewaysList&&gatewaysList.length>0">
			<view class="list" v-for="(item,index) in gatewaysList" :key="index">
				<view class="row">
					<view class="left">
						<view class="text">{{item.name}}</view>
					</view>
					<view class="right">
						<view class="text">{{item.hardwareVer}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cardBg" v-else>
			<u-skeleton rows="4" rowsHeight="25"></u-skeleton>
		</view>
		<u-popup mode="top" :round="10" :show="show" @close="close">
			<view>
				<view class="popupBg">
					<u--form labelWidth='70' labelPosition="left" :model="gateways">
						<u-form-item label="网关SN" borderBottom>
							<u--input v-model="gateways.name" border="none" placeholder="请输入网关名称"></u--input>
						</u-form-item>
						<!-- 	<u-form-item label="上传文件" borderBottom>
							<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
								@progress="progress" @success="success" @fail="fail" />
						</u-form-item> -->
					</u--form>
					<view class="button">
						<u-button type="primary" text="确定" @click="addGateways"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getLocation
	} from '@/utils/getlocation.js'
	export default {
		data() {
			return {
				show: false,
				gatewaysList: [],
				gateways: {
					name: '',
					createTime: Date.now()
				},
				imageValue: []
			}
		},
		computed: {
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		onLoad() {
			this.getGateways()
		},
		methods: {
			// // 获取上传状态
			// select(e) {
			// 	console.log('选择文件：', e)
			// },
			// // 获取上传进度
			// progress(e) {
			// 	console.log('上传进度：', e)
			// },

			// // 上传成功
			// success(e) {
			// 	console.log('上传成功')
			// },

			// // 上传失败
			// fail(e) {
			// 	console.log('上传失败：', e)
			// },
			close() {
				this.show = false
			},
			async getGateways() {
				const db = uniCloud.database()
				const res = await db.collection('gateways').where({
					category: 'sn'
				}).get()
				this.gatewaysList = res.result.data
			},
			async addGateways() {
				if (!this.gateways.name) return uni.$u.toast('请输入网关名称')
				uni.showLoading({
					title: '添加中...'
				});
				let config = {
					"version": 2,
					"server": "aiotomation.com",
					"ports": {
						"wwan": {
							"APN": "payandgo.o2.co.uk",
							"Enable": false,
							"APNIMSI": 23010,
							"DailType": "PPPoE",
							"Password": "password",
							"Username": "payandgo",
							"CardNumber": "18600457386"
						},
						"wan": {
							"IP": "192.168.0.168",
							"Mask": "255.255.255.0",
							"Enable": false,
							"Gateway": "192.168.0.1",
							"FirstDNS": "8.8.8.8",
							"SecondDNS": "8.8.4.4"
						},
						"rs232": {
							"enable": false,
							"devices": []
						},
						"rs485a": {
							"enable": true,
							"devices": []
						},
						"rs485b": {
							"enable": false,
							"devices": []
						},
						"lan": {
							"enable": false,
							"devices": []
						}
					},
					"firmwareVer": "0.0.8",
					"hardwareVer": "ASCG-CN",
					"lastConfigTime": "2022.11.23",
					"lastConfigTimestamp": 1634521739426,
					name: this.gateways.name
				}
				const db = uniCloud.database()
				const result = await db.collection('gateways').add({
					...this.gateways,
					...config
				})
				await this.addRead()
				await this.addEvent()
				await uni.$u.toast('添加成功')
				await uni.hideLoading();
				await this.getGateways()
				this.show = false
				this.gateways = {}
			},
			async addEvent() {
				const update = {
					"event": [{
						"disconnected_at": Date.now(),
						"proto_name": "MQTT",
						"clientid": this.gateways.name,
						"event": "connected",
						"sockname": "172.18.0.2:1883",
						"peername": "117.61.184.176:25334",
						"timestamp": Date.now(),
						"reason": "keepalive_timeout",
						"node": "emqx@172.18.0.2",
						"timestring": this.getCurrentTime
					}],
					"category": "event",
					"name": this.gateways.name
				}
				const db = uniCloud.database()
				const result = await db.collection('gateways').add(update)
			},
			async addRead() {
				const readData = {
					"createAt": this.getCurrentTime,
					"ports": {
						"rs232": {
							"Device": [],
							"enable": false
						},
						"rs485a": {
							"Device": [],
							"enable": false
						},
						"rs485b": {
							"Device": [],
							"enable": false
						},
						"lan": {
							"Device": [],
							"enable": false
						}
					},
					"name": this.gateways.name,
					"category": "realtime"
				}
				const db = uniCloud.database()
				const result = await db.collection('gateways').add(readData)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		border-bottom: 1px solid #eee;

		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			position: relative;
			background: #fff;

			.left {
				display: flex;
				align-items: center;

				.text {
					padding-left: 20rpx;
					color: #666
				}
			}

			.right {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					color: #aaa;

				}
			}
		}

		&:last-child {
			border-bottom: 0
		}
	}
</style>